<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/scss">
		@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

		$color-light-gray: #eaece5;

		body, html {
			height: 100%;
			width: 100%;
		}

		body {
			font-family: 'Raleway', sans-serif;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $color-light-gray;
		}

		.text {
			font-size: 8em;
			position: relative;
			text-transform: full-width;
			display: flex;

			.space {
				width: 0.3em
			}

			.letter {
				position: relative;
				display: flex;

				.source {
					color: gray;
					-webkit-text-stroke: 0.01em rgba(black, 0.3);
					display: flex;
				}

				.overlay, .shadow {
					position: absolute;
					top: 0;
					left: 0;
					pointer-events: none;
					user-select: none;
				}

				.overlay {
					background-image: linear-gradient(90deg, white 50%, lighten($color-light-gray, 2));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					transform: rotateY(-30deg) skew(0, -10deg);
					transform-origin: left;
					animation: overlay 3s infinite ease-out var(--delay);
				}

				.shadow {
					filter: blur(5px);
					background-image: linear-gradient(90deg, rgba(black, 0.4) 30%, transparent);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
					animation: shadow 3s infinite var(--delay);
				}
			}
		}

		@keyframes shadow {
			0%, 20%, 100% {
				transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
				opacity: 1;
			}
			10% {
				transform: skew(0, 0) translateY(0) translateX(0);
				opacity: 0;
			}
		}

		@keyframes overlay {
			0%, 20%, 100% {
				transform: rotateY(-30deg) skew(0, -10deg);
			}
			10% {
				transform: rotateY(0deg) skew(0, 0);
			}
		}

	</style>
</head>
<body>
<div class="container">
	<div class="box">
		<h2 class="solid underline">solid</h2>
		<p>text-decoration: underline;</p>
		<p>text-decoration-style: solid;</p>
	</div>
	<div class="box">
		<h2 class="dotted underline">dotted</h2>
		<p>text-decoration: underline;</p>
		<p>text-decoration-style: dotted;</p>
	</div>
	<div class="box">
		<h2 class="dashed underline">dashed</h2>
		<p>text-decoration: underline;</p>
		<p>text-decoration-style: dashed;</p>
	</div>
	<div class="box">
		<h2 class="wavy underline">wavy</h2>
		<p>text-decoration: underline;</p>
		<p>text-decoration-style: wavy;</p>
	</div>
	<div class="box">
		<h2 class="underline">underline</h2>
		<p>text-decoration: underline;</p>
	</div>
	<div class="box">
		<h2 class="overline">overline</h2>
		<p>text-decoration: overline;</p>
	</div>
	<div class="box">
		<h2 class="underline-overline">underline/overline</h2>
		<p>text-decoration: underline overline;</p>
	</div>
	<div class="box">
		<h2 class="line-through">line-through</h2>
		<p>text-decoration: line-through;</p>
	</div>

	<div class="thickness">
		<div class="box">
			<h2 class="thin underline">thin</h2>
			<p>text-decoration-thickness: 1.5px;</p>
		</div>
		<div class="box">
			<h2 class="normal underline">normal</h2>
			<p>text-decoration-thickness: 2.5px;</p>
		</div>
		<div class="box">
			<h2 class="thick underline">thick</h2>
			<p>text-decoration-thickness: 6px;</p>
		</div>
	</div>

	<div class="underline-offset">
		<div class="box">
			<h2 class="underline double">double</h2>
			<p>text-decoration: double;</p>
			<p>text-decoration-style: solid;</p>
		</div>
		<div class="box">
			<h2 class="underline double offset">double offset</h2>
			<p>text-decoration: double;</p>
			<p>text-decoration-style: solid;</p>
			<p>text-decoration-offset: 6px;</p>
		</div>
		<div class="box">
			<h2 class="underline wavy">wavy</h2>
			<p>text-decoration: underline;</p>
			<p>text-decoration-style: wavy;</p>
		</div>
		<div class="box">
			<h2 class="underline wavy offset">wavy offset</h2>
			<p>text-decoration: underline;</p>
			<p>text-decoration-style: wavy;</p>
			<p>text-decoration-offset: 8px;</p>
		</div>
	</div>
</div>
<script type="module">
	import React from 'https://cdn.skypack.dev/react';
	import ReactDOM from 'https://cdn.skypack.dev/react-dom';

	const Text = ({value}) => (
			<div className='text'>
				{value.split('').map((char, i) => (
						<>
							{char === ' ' && <div className='space'/>}
							{char !== ' ' && (
									<div className='letter' style={{'--delay': `${i*0.2}s`}}>
										<span className='source'>{char}</span>
										<span className='shadow'>{char}</span>
										<span className='overlay'>{char}</span>
									</div>
							)}
						</>
				))}
			</div>
	);

	const App = () => (
			<div className='app'>
				<Text value='PAPER'/>
				<Text value='CUT!'/>
			</div>
	);

	ReactDOM.render(
			<App/>,
			document.body
	);
</script>
</body>
</html>